<template >
  <div>
    <hr>
    京东的子组件
    <h1>{{obj.room.size}}</h1>
    <h1>{{obj.room.color}}</h1>
    <button @click="change()">修改数据</button>
    <button @click="del()">删除属性</button>
  </div>
</template>
<script>
export default {
  name: "jdson",
  created () {
    console.log(111)
  },

  data () {
    return {
      kk: "123",
      list: ["大哥", "二哥", "贤弟"],
      obj: {
        room: {
          size: "80"
        }
      }
    }
  },
  mounted () {
    console.log(this.$parent)
  },
  methods: {
    say () {
      alert("我是子组件")
    },
    run (msg) {
      alert(msg)
    },
    change () {
      this.kk = "456"
      // this.obj.room.size = "180"
      // this.obj.room.color = "red";
      // console.log(this.obj)
      // this.$set(this.obj, "room", { size: 190 })
      // 向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
      // this.$set(this.obj.room, "size", "200");
      this.$set(this.obj.room, "color", "green");
      console.log(this.obj);
      // 


    },
    del () {
      // this.$delete(对象，属性)
      this.$delete(this.obj.room, "color");
    }
  }
}
</script>
<style lang="less">
</style>